<template>
  <div class="xtx-hotbrand">
    <div class="container">
      <Panel title="热门品牌" sub-title="国际经典 品质保证">
        <template #head-right>
          <div class="xtx-hotbrand-header__controller">
            <a
              href="javascript:;"
              :class="{ disabled: index === 0 }"
              @click="toggle(-1)"
            >
              <IconifyIcon icon="ooui:previous-ltr" />
            </a>
            <a
              href="javascript:;"
              :class="{ disabled: index === 1 }"
              @click="toggle(1)"
            >
              <IconifyIcon icon="ooui:previous-rtl" />
            </a>
          </div>
        </template>
        <template #panel-content>
          <div class="xtx-hotbrand-box" ref="target">
            <transition name="fade">
              <ul
                class="xtx-hotbrand-list"
                ref="brandList"
                v-if="result?.length"
              >
                <li
                  class="xtx-hotbrand-list__item"
                  v-for="brand in result"
                  :key="brand.id"
                >
                  <router-link to="#">
                    <img :src="brand.picture" alt="" />
                  </router-link>
                </li>
              </ul>
              <div class="skeleton" v-else>
                <Skeleton
                  class="item"
                  width="240px"
                  height="305px"
                  bgColor="#e4e4e4"
                  animate
                  v-for="i in 5"
                  :key="i"
                />
              </div>
            </transition>
          </div>
        </template>
      </Panel>
    </div>
  </div>
</template>

<script setup lang="ts">
import Panel from './Panel.vue'
import Skeleton from '@/components/Skeleton.vue'
import { hotBrandAPI } from '@/api/home'
import { ref } from 'vue'
import { useLazyData } from '@/hooks/useLazyData'
import { type HotBrand } from '@/api/home/types.d'
defineOptions({
  name: 'HotBrand'
})

/** 控制列表移动 */
const brandList = ref()
/** 当前品牌组的下标，五个为一组 */
const index = ref(0)

/** 上/下一组
 * step: 步长
 */
function toggle(step: number): void {
  const newIndex = index.value + step
  console.log('newIndex', newIndex)
  if (newIndex < 0 || newIndex > 1) return
  brandList.value.style.transform = `translateX(${-newIndex * 1240}px)`
  index.value = newIndex
  console.log('index', index.value)
}

/** 获取热门品牌数据 */
const { result, target } = useLazyData<HotBrand>(hotBrandAPI)
</script>

<style lang="scss" scoped>
.xtx-hotbrand {
  padding-bottom: 40px;
  background-color: $bg-gary;

  &-header {
    &__controller {
      a {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: $xtx-color;
        color: $basic-white;
        text-align: center;
        line-height: 20px;

        &:last-child {
          margin-left: 5px;
        }

        &.disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }
      }
    }
  }

  &-box {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 1240px;
    height: 305px;
  }

  &-list {
    display: flex;
    width: 200%;
    transition: transform 1s;

    &__item {
      margin-right: 10px;
      width: 240px;
      height: 305px;

      &:nth-child(5n) {
        margin-right: 0;
      }

      a {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .skeleton {
    display: flex;
    width: 100%;

    .item {
      margin-right: 10px;

      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
